<template>
  <div class="main">
    <p class="title">
      <i></i>
      全国
    </p>
    <swiper class="imgBox" ref="mySwiper" :options="swiperOptions">
      <swiper-slide
        class="image"
        v-for="(data, index) in dataList"
        :key="index"
      >
        <img :src="data.image" />
      </swiper-slide>
    </swiper>
    <ul class="nav">
      <li
        @click="clickHandle(index)"
        :class="currentIndex === index ? 'active' : ''"
        v-for="(data, index) in dataList"
        :key="index"
      >
        {{ data.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import SwiperCore, { Autoplay } from 'swiper/core'
SwiperCore.use([Autoplay])
export default {
  data () {
    const that = this
    return {
      currentIndex: 0,
      swiperOptions: {
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        autoplay: true,
        on: {
          slideChangeTransitionEnd: function () {
            that.currentIndex = this.activeIndex
          }
        }
      },
      dataList: [
        {
          title: '新增疑似/新增确诊',
          image:
            'https://img1.dxycdn.com/2020/0220/014/3397684583507458039-135.png'
        },
        {
          title: '现存确诊/现存疑似',
          image:
            'https://img1.dxycdn.com/2020/0220/697/3397684611424536901-135.png'
        },
        {
          title: '死亡/治愈',
          image:
            'https://img1.dxycdn.com/2020/0220/861/3397684624309439853-135.png'
        },
        {
          title: '病死率',
          image:
            'https://img1.dxycdn.com/2020/0220/168/3397686703073768694-135.png'
        },
        {
          title: '治愈率',
          image:
            'https://img1.dxycdn.com/2020/0220/709/3397686724548816431-135.png'
        }
      ]
    }
  },
  methods: {
    clickHandle (index) {
      this.currentIndex = index
      this.swiper.slideTo(index, 1000, false)
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  }
}
</script>

<style lang='scss' scoped>
.main {
  margin-top:16px;
  border-top: 1px solid rgba(0, 0, 0, 0.107);
  .title {
    padding: 16px;
    font-size: 17px;
    i {
      display: inline-block;
      width: 4px;
      height: 16px;
      background: #4169e2;
      margin-right: 0.1875rem;
      vertical-align: middle;
    }
  }
}

.imgBox .image {
  width: 100%;
  height: 100%;
}
.imgBox .image img {
  width: 100%;
  height: 100%;
}
.nav {
  font-size: 12px;
  display: flex;
  justify-content: space-around;
  padding: 0 16px 10px;
}
.nav li {
  padding: 5px;
  text-align: center;
  width: calc(20% - 2px);
  position: relative;
  text-align: center;
  background: #e6e6e6;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}
li.active {
  color: #4169e2;
  background: #f1f5ff;
}
</style>
